<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/template.xhtml">
    <ui:define name="metadata">
    </ui:define>
    <ui:define name="content">
        <section class="content-header">
            <h1>
                Reporte
                <small>Prestamos</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-home"></i> Inicio</a></li>
                <li><a href="#"><i class="fa fa-laptop"></i> Reporte de Prestamos</a></li>
            </ol>
        </section>
        <p:messages autoUpdate="true" id="msgs" showSummary="true" showDetail="true" closable="true"/>
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-primary"> 
                        <br/>
                        <h:form id="registro">
                            <p:panel id="formulario" header="Filtro por Rango de Fechas" toggleable="true" widgetVar="formulario">
                                <h:panelGrid columns="2" cellpadding="5">
                                    <h:outputText value="Fecha Inicial: *" style="font-weight:bold;"/>  
                                    <p:calendar id="fechaI" value="#{prestamos.fechaI}" required="true" requiredMessage="Necesita ingresar una Fecha Inicial"/>

                                    <h:outputText value="Fecha Final: *" style="font-weight:bold;"/>  
                                    <p:calendar id="fechaF" value="#{prestamos.fechaF}" required="true" requiredMessage="Necesita ingresar una Fecha Final"/>                        

                                    <f:facet name="footer">
                                        <p:commandButton value="Cancelar" process="@this" update="@form" actionListener="#{prestamos.resetForm()}" icon="ui-icon-close" style="margin-right:10px"/>
                                        <p:commandButton value="Consultar" icon="ui-icon-search" actionListener="#{prestamos.consulta()}" update=":consulta" style="margin-right:10px"/>
                                    </f:facet>
                                </h:panelGrid>
                            </p:panel>    
                        </h:form>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="box box-primary"> 
                        <br/>
                        <h:form id="registro2">
                            <p:panel id="formulario2" header="Filtro por Película" toggleable="true" widgetVar="formulario2">
                                <h:panelGrid columns="2" cellpadding="5">
                                    <h:outputText value="Película: *" style="font-weight:bold;"/>
                                    <p:autoComplete id="pelicula" value="#{prestamos.pelicula}" completeMethod="#{prestamos.completePelicula}" placeholder="autocomplete"
                                                    var="pe" itemLabel="#{pe.titulo}" itemValue="#{pe}" converter="peliculaConverter" forceSelection="true" required="true" requiredMessage="Necesita seleccionar una Película">
                                        <f:facet name="itemtip">
                                            <h:panelGrid columns="2" cellpadding="5">
                                                <f:facet name="header">
                                                    <p:graphicImage value="../../resources/images/peliculas/#{pe.id}.#{pe.tipoPortada}" width="70px" height="70px"/> 
                                                </f:facet>
                                                <h:outputText value="Titulo: " style="font-weight:bold;"/>
                                                <h:outputText value="#{pe.titulo}" />

                                                <h:outputText value="Actor: " style="font-weight:bold;"/>
                                                <h:outputText value="#{pe.actor.nombre}" />

                                                <h:outputText value="Director: " style="font-weight:bold;"/>
                                                <h:outputText value="#{pe.director.nombre}" />

                                                <h:outputText value="Genero: " style="font-weight:bold;"/>
                                                <h:outputText value="#{pe.genero}" />

                                                <h:outputText value="Nacionalidad: " style="font-weight:bold;"/>
                                                <h:outputText value="#{pe.nacionalidad}" />

                                                <h:outputText value="Año: " style="font-weight:bold;"/>
                                                <h:outputText value="#{pe.anio}" />
                                            </h:panelGrid>
                                        </f:facet>
                                    </p:autoComplete>

                                    <f:facet name="footer">
                                        <p:commandButton value="Cancelar" process="@this" update="@form" actionListener="#{prestamos.resetForm()}" icon="ui-icon-close" style="margin-right:10px"/>
                                        <p:commandButton actionListener="#{prestamos.consulta2()}" value="Consultar" icon="ui-icon-search" update=":consulta" style="margin-right:10px"/>
                                    </f:facet>
                                </h:panelGrid>
                            </p:panel>

                        </h:form>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="box box-info"> 
                        <br/>
                        <h:form id="consulta">
                            <p:panel header="Prestamos Registrados" toggleable="true"> 
                                <p:dataTable id="tabla" var="p" value="#{prestamos.prestamos}" currentPageReportTemplate="(Mostrando: {startRecord} - {endRecord} de: {totalRecords}, Página: {currentPage}/{totalPages})"  
                                             paginator="true" rows="10" filterEvent="enter" filteredValue="#{prestamos.prestamosFilter}" rowKey="#{p.id}" widgetVar="tabla"
                                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                             rowsPerPageTemplate="5,10,20,50,100,500" emptyMessage="No se encontraron registros.">
                                    <f:facet name="header">
                                        <p:outputPanel>
                                            <h:outputText value="Buscar:" />
                                            <p:inputText id="globalFilter" onkeyup="PF('tabla').filter()" style="width:150px" placeholder="Ingresa una palabra"/>
                                        </p:outputPanel>
                                    </f:facet>
                                    <p:column style="text-align: center" filterBy="#{p.id.id}" filterMatchMode="contains"> 
                                        <f:facet name="header">  
                                            <h:outputText value="ID" />  
                                        </f:facet> 
                                        <h:outputText value="#{p.id.id}" />  
                                    </p:column>  
                                    <p:column style="text-align: center" filterBy="#{p.cliente.nombre}" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Cliente" />  
                                        </f:facet> 
                                        <h:outputText value="#{p.cliente.nombre}" />  
                                    </p:column>  
                                    <p:column style="text-align: center" filterBy="#{p.pelicula.titulo}" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Película" />  
                                        </f:facet> 
                                        <h:outputText value="#{p.pelicula.titulo}" />  
                                    </p:column>
                                    <p:column style="text-align: center" filterBy="#{p.fechaEntrega}" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Fecha de Entrega" />  
                                        </f:facet>
                                        <h:outputText value="#{p.fechaEntrega}" />  
                                    </p:column>
                                    <p:column style="text-align: center" filterBy="#{p.fechaDevolucion}" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Fecha de Devolución" />  
                                        </f:facet>
                                        <h:outputText value="#{p.fechaDevolucion}" />  
                                    </p:column>                        
                                    <f:facet name="footer">
                                        Exportar datos:
                                        <h:commandLink>  
                                            <p:graphicImage value="../../resources/images/excel.png" title="Formato .xls"/>  
                                            <p:dataExporter type="xls" target="tabla" fileName="prestamos" />  
                                        </h:commandLink>
                                    </f:facet>
                                </p:dataTable>     
                            </p:panel>
                        </h:form>
                    </div>
                </div>
            </div>
        </section>
        <p:confirmDialog global="true" showEffect="fade" hideEffect="explode" appendTo="@(body)">
            <h:form>
                <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
            </h:form>
        </p:confirmDialog>
    </ui:define>
</ui:composition>
